<template>
	<!-- 堆积统计图 -->
	<div></div>
</template>

<script>
import { StackedBar } from '@antv/g2plot'

export default {
	name: 'StackedBar',
	props: {
		chartObj: {
			type: Object,
			required: true,
		},
		chartData: {
			type: Array
		}
	},
	data () {
		return {
			StackedBar: {},
			barData: []
		}
	},
	mounted () {
		this.getBarChart()
		// this.paintChart
	},
	methods: {
		getBarChart () {
			// todo 图形调整
			this.StackedBar = new StackedBar(
				document.getElementById( this.chartObj.chartId ),
				{
					forceFit: true,
					pixelRatio: 3,
					renderer: 'svg',
					title: { visible: false },
					// data: [],
					yField: 'exam_type',
					xField: 'count',
					xAxis: {
						title: { visible: false },
						// formatter: v => `${ Math.round( v / 10000 ) }万`,
					},
					yAxis: { title: { visible: false } },
					columnSize: 40,
					// colorField: 'msg',
					color: [ '#91C280', '#EDAA75', '#79B1AA', '#729ABA', '#F69999' ],
					stackField: 'msg',
					legend: {
						position: 'top-left',
						marker: { symbol: 'circle' },
					},
					label: { position: 'middle' },
				},
			)
			this.StackedBar.render()
		},
		paintChart () {
			console.log( this.chartData );
			// 绘图
			this.StackedBar.data = this.barData;
			this.StackedBar.render()
		},
		rePaintChart ( data ) {
			// 重置图表
			this.StackedBar.updateConfig( {
				forceFit: true,
				pixelRatio: 3,
				renderer: 'svg',
				title: { visible: false },
				data,
				yField: 'exam_type',
				xField: 'count',
				xAxis: {
					title: { visible: false },
					// formatter: v => `${ Math.round( v / 10000 ) }万`,
				},
				yAxis: { title: { visible: false } },
				columnSize: 40,
				// colorField: 'msg',
				color: [ '#91C280', '#EDAA75', '#79B1AA', '#729ABA', '#F69999' ],
				/* 	color: ( d ) => {
						console.log( d );
						if ( d === '采集成功' ) return [ '#91C280' ];
						if ( d === '不符合采集' ) return [ '#EDAA75' ];
						if ( d === '采集失败' ) return [ '#79B1AA' ];
						if ( d === '不存在' ) return [ '#729ABA' ];
						if ( d === '未采集' ) return [ '#729ABA' ];
						if ( d === '未校对' ) return [ '#F69999' ];
						return [ '#91C280', 'red', 'green', '#91C280', 'red', 'green' ];
					}, */
				stackField: 'msg',
				legend: {
					position: 'top-left',
					marker: { symbol: 'circle' },
				},
				label: { position: 'middle' },
			}
			)
			this.StackedBar.render()
		}

	}
}
</script>

<style lang="less">
#-axis-title {
	display: none;
}
</style>
